<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,  user-scalable=no" />
<meta name="format-detection" content="telephone=no, email=no" />
<meta name="apple-nobile-web-app-capable" content="yes" />

<meta name="keywords" content="标题说明" />
<meta name="description" content="标题说明" />
<title>云主机</title>

<link type="text/css" rel="stylesheet" href="./css/common.css" />
<link type="text/css" rel="stylesheet" href="./css/host.css" />
<link type="text/css" rel="stylesheet" href="./css/fontCss/font-awesome.min.css" />

</head>

<body>

<div class="w100">
	<ul class="hC_choose clearfix">
		<li class="fl">
			<div class="hC_create greenBtn-o">
				<a href="#"><i class="fa fa-plus" aria-hidden="true"></i>创建主机</a>
			</div>
		</li>
		<li class="fl">
			<div class="hC_tag grayBtn-o">
				<a href="#"><i class="fa fa-tags" aria-hidden="true"></i>标签</a>
			</div>
		</li>
		<li class="fl">
			<div class="hC_refresh">
				<a href="#" title="刷新"><i class="fa fa-refresh fa-2x" aria-hidden="true"></i></a>
			</div>
		</li>
		<li class="fr">
			<div class="hC_search">
				<input type="text" />
				<a href="#"><i class="fa fa-search fa-lg" aria-hidden="true"></i></a>
			</div>
		</li>
	</ul>
	<div class="hC_host">
		<table class="hC_hostTable">
			<thead>
				<tr>
					<th class="hC_check"><input type="checkbox" name=""></th>
					<th class="hC_name">ID（名称）</th>
					<th class="hC_state">状态</th>
					<th class="hC_class">类型</th>
					<th class="hC_map">映像</th>
					<th class="hC_setting">配置</th>
					<th class="hC_net">网络</th>
					<th class="hC_ip">公网IP</th>
					<th class="hC_fire">防火墙</th>
					<th class="hC_warning">告警状态</th>
					<th class="hC_createdin">创建于</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td class="hC_check"><input type="checkbox" name=""></td>
					<td>xxxx</td>
					<td>ACTIVE</td>
					<td>这是类型</td>
					<td>这是映像</td>
					<td>这是配置</td>
					<td>这是网络</td>
					<td>192.168.0.1</td>
					<td>这是防火墙</td>
					<td>安全</td>
					<td>我也不知道</td>
				</tr>
				<tr>
					<td class="hC_check"><input type="checkbox" name=""></td>
					<td>xxxx</td>
					<td>ACTIVE</td>
					<td>这是类型</td>
					<td>这是映像</td>
					<td>这是配置</td>
					<td>这是网络</td>
					<td>192.168.0.1</td>
					<td>这是防火墙</td>
					<td>安全</td>
					<td>我也不知道</td>
				</tr>
				<tr>
					<td class="hC_check"><input type="checkbox" name=""></td>
					<td>xxxx</td>
					<td>ACTIVE</td>
					<td>这是类型</td>
					<td>这是映像</td>
					<td>这是配置</td>
					<td>这是网络</td>
					<td>192.168.0.1</td>
					<td>这是防火墙</td>
					<td>安全</td>
					<td>我也不知道</td>
				</tr>
			</tbody>
		</table>
	</div><!-- end of hC_host -->

	<div class="hC_detail">
		<div class="hC_detailToper">
			<p>云主机<span>This is cloudName.</span></p>
		</div>
		<div class="hC_detailChoose">
			<span class="grayBtn-o hC_detailChoose_on"><a href="#">云主机概况</a></span>
			<span class="grayBtn-o"><a href="#">云主机监控</a></span>
		</div>
		<ul class="hC_detailMess clearfix">
			<li class="fl">
				<div class="hC_messDemo">
					<div class="hC_toper">信息</div>
					<div class="hC_messDet">
						<p>名称: <span>uuu</span></p> 
						<p>云主机ID: <span>6b68a4f2-f120-4c04-9d74-771b0f42742b</span></p>
						<p>状态:<span>Active</span></p>
						<p>任务:<span>None</span></p>
						<p>可用域:<span>Public</span></p>
						<p>创建时间:<span>2016-12-11 20:30:24</span></p>
						<p>正常运行时间:<span>4天 19小时</span>
					</div>
				</div>
				<div class="hC_messDemo">
					<div class="hC_toper">IP地址</div>
					<div class="hC_messDet">
						<p>内网:<span>192.168.0.2</span></p>
					</div>
				</div>
				<div class="hC_messDemo">
					<div class="hC_toper">元数据</div>
					<div class="hC_messDet">
						<p>键名称:<span>default-keyPair</span></p>
						<p>镜像名称:<span>wlcentos6.5</span></p>
					</div>
				</div>
			</li>
			<li class="fr">
				<div class="hC_messDemo">
					<div class="hC_toper">信息</div>
					<div class="hC_messDet">
						<p>名称: <span>uuu</span></p> 
						<p>云主机ID: <span>6b68a4f2-f120-4c04-9d74-771b0f42742b</span></p>
						<p>状态:<span>Active</span></p>
						<p>任务:<span>None</span></p>
						<p>可用域:<span>Public</span></p>
						<p>创建时间:<span>2016-12-11 20:30:24</span></p>
						<p>正常运行时间:<span>4天 19小时</span>
					</div>
				</div>
				<div class="hC_messDemo">
					<div class="hC_toper">安全组</div>
					<div class="hC_messDet">
						<p>名称: <span>uuu</span></p> 
						<p>云主机ID: <span>6b68a4f2-f120-4c04-9d74-771b0f42742b</span></p>
						<p>状态:<span>Active</span></p>
						<p>任务:<span>None</span></p>
						<p>可用域:<span>Public</span></p>
						<p>创建时间:<span>2016-12-11 20:30:24</span></p>
						<p>正常运行时间:<span>4天 19小时</span>
					</div>
				</div>
			</li>
		</ul>
	</div><!-- end of hC_detail -->
</div>	


<div class="pop popsHost" style="display: none;">
	<div class="popCont popsHost_cont">
		<div class="popsTit clearfix">
			<p>创建主机</p>
			<a href="#"><i class="fa fa-times fa-lg" aria-hidden="true"></i></a>
		</div>

		<div class="popsHost_wrap clearfix">
			<div class="popsHost_choose fl">
				<ul class="popsHost_step clearfix">
					<li class="step1 stepOn">选择映像<span>1</span></li>
					<li class="step2">配置选择<span>2</span><b></b></li>
					<li class="step3">网络设置<span>3</span><b></b></li>
					<li class="step4">基本信息<span>4</span><b></b></li>
				</ul>
				<div class="popsHost_all clearfix">
					<div class="popsHost_list fl">
						<div class="popsHost_listChoose"></div>
						<ul class="popsHost_tabel">
							<li>
								<span class="blueTxt">CentOS 5.8 32bit</span>
								<span class="grayTxt">ID: centos58x86a</span>
							</li>
							<li>
								<span class="blueTxt">CentOS 5.8 32bit</span>
								<span class="grayTxt">ID: centos58x86a</span>
							</li>
							<li>
								<span class="blueTxt">CentOS 5.8 32bit</span>
								<span class="grayTxt">ID: centos58x86a</span>
							</li>
							<li>
								<span class="blueTxt">CentOS 5.8 32bit</span>
								<span class="grayTxt">ID: centos58x86a</span>
							</li>
							<li>
								<span class="blueTxt">CentOS 5.8 32bit</span>
								<span class="grayTxt">ID: centos58x86a</span>
							</li>
							<li>
								<span class="blueTxt">CentOS 5.8 32bit</span>
								<span class="grayTxt">ID: centos58x86a</span>
							</li>
						</ul>
					</div>
					<div class="popsHost_list fl">
						 <ul class="popsHost_setting">
						 	<li>
						 		<p>主机类型</p>
						 		<span>性能型</span>
						 		<span>超高性能型</span>
						 	</li>
						 	<li>
						 		<p>CPU</p>
						 		<span>1核</span>
						 		<span>2核</span>
						 		<span>4核</span>
						 		<span>8核</span>
						 		<span>12核</span>
						 		<span>16核</span>
						 	</li>
						 	<li>
						 		<p>内存</p>
						 		<span>1G</span>
						 		<span>2G</span>
						 		<span>4G</span>
						 		<span>6G</span>
						 		<span>8G</span>
						 		<span>12G</span>
						 		<span>16G</span>
						 		<span>24G</span>
						 		<span>32G</span>
						 		<span>40G</span>
						 	</li>
						 </ul>
					</div>
					<div class="popsHost_list fl">
						 <ul class="popsHost_setting">
						 	<li>
						 		<p>基础网络</p>
						 		<span>基础网络 提示：基础网络主机的内网 IP 可能会发生变化</span>
						 	</li>
						 	<li>
						 		<p>私有网络</p>
						 		<span>受管使用路由器来管理的私有网络 无</span>
						 		<span>自管您自己管理的私有网络（可多选）无</span>
						 	</li>
						 </ul>
					</div>
					<div class="popsHost_list fl">
						<ul class="popsHost_base">
							<li class="clearfix">
								<div class="fl">主机名称</div>
								<div class="fr"><input type="text" class="w64" /></div>
							</li>
							<li class="clearfix">
								<div class="fl">主机数量</div>
								<div class="fr"><input type="text" class="w30" value="1" /></div>
							</li>
							<li class="clearfix">
								<div class="fl">SSH登录方式</div>
								<div class="fr">
									<label><input type="radio" name="SSH" />SSH密钥 (?)</label>
									<label><input type="radio" name="SSH" checked="checked" />密码</label>
								</div>
							</li>
							<li class="clearfix">
								<div class="fl">用户名</div>
								<div class="fr"><input type="text" class="w64" value="root" disabled /></div>
							</li>
							<li class="clearfix">
								<div class="fl">SSH密钥</div>
								<div class="fr"><input type="text" class="w30" value="1" /></div>
							</li>
						</ul>
					</div>
				</div>
				
				<div class="popsHost_btn clearfix">
					<span class="grayBtn popsHost_pre fl" style="display: none"><a href="#">上一步</a></span>
					<span class="grayBtn popsHost_next fr"><a href="#">下一步</a></span>
					<!-- <span class="greenBtn fr"><a href="#">创建</a></span> -->
				</div>
			</div>
			<div class="popsHost_detail fl">
				<p>配置详情</p>
				<table class="popsHost_detTable">
					<tr>
						<td>映像</td>
						<td>安全狗云安全系统（CentOS 6.5 64位）</td>
					</tr>
					<tr>
						<td>主机类型</td>
						<td>性能型</td>
					</tr>
					<tr>
						<td>CPU</td>
						<td>1 核</td>
					</tr>
					<tr>
						<td>内存</td>
						<td>1 G</td>
					</tr>
					<tr>
						<td>名称</td>
						<td>xxxxx</td>
					</tr>
					<tr>
						<td>数量</td>
						<td>111</td>
					</tr>
				</table>
				<h6>
					主机价格: <span>¥0.10</span>每小时<sub>(合¥72.00每月)</sub>
				</h6>
				<h6>
					映像价格: <span>¥0.10</span>每小时<sub>(合¥72.00每月)</sub>
				</h6>
				<h4>
					总价格: <span>¥0.10</span>每小时<sub>(合¥72.00每月)</sub>
				</h4>
			</div>
		</div>
	</div><!-- end of popsHost_cont -->

	<div class="bg"></div>
</div><!-- end of popsHost -->

<script type="text/javascript" src="./js/jquery-1.7.2-min.js"></script>
<script type="text/javascript" src="./js/jq/jquery.goup.min.js"></script>
<script type="text/javascript" src="./js/common.js"></script>
<script type="text/javascript">

var i=3;
var num= 0;
$(".popsHost_next a").click(function(){
     i--;
     num-=600;
    if(i<0){
    	return;
    }
    $('.popsHost_all').animate({left: num});
    console.log("i---"+i);
    console.log("num是"+num);
    if (num == -1800) {
    	$(this).parent().before('<span class="greenBtn fr"><a href="#">创建</a></span>').remove();
    	/*$(this).parent().remove();*/
    }
});
</script>

</body>
</html>